<template>
  <div class="batch-association-form">
    <!-- 关联目标选择 -->
    <div class="form-section">
      <h5>选择关联目标</h5>
      <div class="target-types">
        <label
          v-for="type in targetTypes"
          :key="type.key"
          :class="{ selected: selectedTargetTypes.includes(type.key) }"
          class="target-type-option"
        >
          <input
            v-model="selectedTargetTypes"
            :value="type.key"
            type="checkbox"
          />
          <div :class="type.key" class="type-icon">
            <component :is="type.icon" />
          </div>
          <div class="type-content">
            <div class="type-name">{{ type.name }}</div>
            <div class="type-description">{{ type.description }}</div>
          </div>
        </label>
      </div>
    </div>

    <!-- 活动选择 -->
    <div v-if="selectedTargetTypes.includes('activity')" class="form-section">
      <div class="section-header">
        <h5>选择活动</h5>
        <button class="btn btn-text" @click="loadActivities">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2"/>
            <path d="M3 3v5h5" stroke="currentColor" stroke-width="2"/>
            <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" stroke="currentColor" stroke-width="2"/>
            <path d="M21 21v-5h-5" stroke="currentColor" stroke-width="2"/>
          </svg>
          刷新
        </button>
      </div>

      <div class="search-box">
        <input
          v-model="activitySearchQuery"
          placeholder="搜索活动..."
          type="text"
          @input="searchActivities"
        />
        <svg fill="none" viewBox="0 0 24 24">
          <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
          <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>

      <div class="items-list">
        <div
          v-for="activity in filteredActivities"
          :key="activity.id"
          :class="{ selected: selectedActivities.includes(activity.id) }"
          class="item-card activity"
          @click="toggleActivity(activity.id)"
        >
          <div class="item-checkbox">
            <input
              :checked="selectedActivities.includes(activity.id)"
              type="checkbox"
              @change="toggleActivity(activity.id)"
              @click.stop
            />
          </div>
          <div class="item-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="4"/>
              <line stroke="currentColor" stroke-width="2" x1="16" x2="16" y1="2" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="8" x2="8" y1="2" y2="6"/>
              <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="10" y2="10"/>
            </svg>
          </div>
          <div class="item-content">
            <div class="item-title">{{ activity.title }}</div>
            <div class="item-meta">
              <span class="item-date">{{ formatDate(activity.activityDate) }}</span>
              <span v-if="activity.location" class="item-location">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" stroke="currentColor" stroke-width="2"/>
                  <circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
                {{ activity.location }}
              </span>
            </div>
            <div class="item-description">{{ activity.description }}</div>
          </div>
        </div>

        <div v-if="filteredActivities.length === 0" class="empty-message">
          <svg fill="none" viewBox="0 0 24 24">
            <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="4"/>
            <line stroke="currentColor" stroke-width="2" x1="16" x2="16" y1="2" y2="6"/>
            <line stroke="currentColor" stroke-width="2" x1="8" x2="8" y1="2" y2="6"/>
            <line stroke="currentColor" stroke-width="2" x1="3" x2="21" y1="10" y2="10"/>
          </svg>
          <p>没有找到匹配的活动</p>
        </div>
      </div>
    </div>

    <!-- 日记选择 -->
    <div v-if="selectedTargetTypes.includes('diary')" class="form-section">
      <div class="section-header">
        <h5>选择日记</h5>
        <button class="btn btn-text" @click="loadDiaries">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2"/>
            <path d="M3 3v5h5" stroke="currentColor" stroke-width="2"/>
            <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" stroke="currentColor" stroke-width="2"/>
            <path d="M21 21v-5h-5" stroke="currentColor" stroke-width="2"/>
          </svg>
          刷新
        </button>
      </div>

      <div class="search-box">
        <input
          v-model="diarySearchQuery"
          placeholder="搜索日记..."
          type="text"
          @input="searchDiaries"
        />
        <svg fill="none" viewBox="0 0 24 24">
          <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
          <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>

      <div class="items-list">
        <div
          v-for="diary in filteredDiaries"
          :key="diary.id"
          :class="{ selected: selectedDiaries.includes(diary.id) }"
          class="item-card diary"
          @click="toggleDiary(diary.id)"
        >
          <div class="item-checkbox">
            <input
              :checked="selectedDiaries.includes(diary.id)"
              type="checkbox"
              @change="toggleDiary(diary.id)"
              @click.stop
            />
          </div>
          <div class="item-icon">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2"/>
              <path d="M6.5 2H20v20l-1.586-1.586a2 2 0 0 0-2.828 0L14 22.414a2 2 0 0 1-2.828 0l-1.586-1.586a2 2 0 0 0-2.828 0L5.172 22.414A2 2 0 0 1 2 20.828V6.5A2.5 2.5 0 0 1 4.5 4H6.5V2z"/>
            </svg>
          </div>
          <div class="item-content">
            <div class="item-title">{{ diary.title }}</div>
            <div class="item-meta">
              <span class="item-date">{{ formatDate(diary.createTime) }}</span>
              <span v-if="diary.mood" class="item-mood">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="9" x2="9.01" y1="9" y2="9"/>
                  <line stroke="currentColor" stroke-width="2" x1="15" x2="15.01" y1="9" y2="9"/>
                </svg>
                {{ diary.mood }}
              </span>
            </div>
            <div class="item-description">{{ truncateText(diary.content, 80) }}</div>
          </div>
        </div>

        <div v-if="filteredDiaries.length === 0" class="empty-message">
          <svg fill="none" viewBox="0 0 24 24">
            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2"/>
            <path d="M6.5 2H20v20l-1.586-1.586a2 2 0 0 0-2.828 0L14 22.414a2 2 0 0 1-2.828 0l-1.586-1.586a2 2 0 0 0-2.828 0L5.172 22.414A2 2 0 0 1 2 20.828V6.5A2.5 2.5 0 0 1 4.5 4H6.5V2z"/>
          </svg>
          <p>没有找到匹配的日记</p>
        </div>
      </div>
    </div>

    <!-- 时间线节点创建 -->
    <div v-if="selectedTargetTypes.includes('timeline')" class="form-section">
      <h5>创建时间线节点</h5>
      <div class="timeline-form">
        <div class="form-group">
          <label>节点标题</label>
          <input
            v-model="timelineForm.title"
            class="form-input"
            placeholder="输入时间线节点标题..."
            type="text"
          />
        </div>

        <div class="form-group">
          <label>节点描述</label>
          <textarea
            v-model="timelineForm.description"
            class="form-textarea"
            placeholder="描述这个时间点发生的事情..."
            rows="3"
          ></textarea>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label>事件日期</label>
            <input
              v-model="timelineForm.eventDate"
              class="form-input"
              type="date"
            />
          </div>
          <div class="form-group">
            <label>事件时间</label>
            <input
              v-model="timelineForm.eventTime"
              class="form-input"
              type="time"
            />
          </div>
        </div>

        <div class="form-group">
          <label>标签</label>
          <div class="tags-input">
            <div class="tags-list">
              <span
                v-for="(tag, index) in timelineForm.tags"
                :key="index"
                class="tag-item"
              >
                {{ tag }}
                <button @click="removeTag(index)">×</button>
              </span>
              <input
                v-model="newTag"
                class="tag-input"
                placeholder="添加标签..."
                type="text"
                @keyup.enter="addTag"
                @keyup.comma="addTag"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 关联设置 -->
    <div class="form-section">
      <h5>关联设置</h5>
      <div class="association-options">
        <label class="option-item">
          <input v-model="associationSettings.addDescription" type="checkbox" />
          <div class="option-content">
            <div class="option-title">添加关联描述</div>
            <div class="option-desc">为每个关联添加自定义描述</div>
          </div>
        </label>

        <div v-if="associationSettings.addDescription" class="description-input">
          <textarea
            v-model="associationSettings.description"
            class="form-textarea"
            placeholder="描述这些媒体文件与选中内容的关联..."
            rows="2"
          ></textarea>
        </div>

        <label class="option-item">
          <input v-model="associationSettings.autoSort" type="checkbox" />
          <div class="option-content">
            <div class="option-title">自动排序</div>
            <div class="option-desc">根据文件创建时间自动排序</div>
          </div>
        </label>

        <label class="option-item">
          <input v-model="associationSettings.createTimeline" type="checkbox" />
          <div class="option-content">
            <div class="option-title">同步到时间线</div>
            <div class="option-desc">为每个关联创建时间线节点</div>
          </div>
        </label>
      </div>
    </div>

    <!-- 预览区域 -->
    <div class="form-section">
      <h5>关联预览</h5>
      <div class="association-preview">
        <div class="preview-summary">
          <div class="summary-item">
            <div class="summary-number">{{ selectedMedia.length }}</div>
            <div class="summary-label">媒体文件</div>
          </div>
          <div class="summary-arrow">→</div>
          <div class="summary-targets">
            <div v-if="selectedActivities.length > 0" class="target-item">
              <div class="target-number">{{ selectedActivities.length }}</div>
              <div class="target-label">活动</div>
            </div>
            <div v-if="selectedDiaries.length > 0" class="target-item">
              <div class="target-number">{{ selectedDiaries.length }}</div>
              <div class="target-label">日记</div>
            </div>
            <div v-if="selectedTargetTypes.includes('timeline') && timelineForm.title" class="target-item">
              <div class="target-number">1</div>
              <div class="target-label">时间线节点</div>
            </div>
          </div>
        </div>

        <div class="preview-details">
          <div class="media-preview">
            <h6>待关联的媒体文件</h6>
            <div class="media-list">
              <div
                v-for="media in selectedMedia.slice(0, 6)"
                :key="media.id"
                class="media-item"
              >
                <img
                  v-if="media.thumbnailUrl"
                  :alt="media.fileName"
                  :src="media.thumbnailUrl"
                />
                <div v-else :class="media.fileType" class="file-icon">
                  <svg fill="none" viewBox="0 0 24 24">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
                    <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
                <span class="media-name">{{ media.fileName }}</span>
              </div>
              <div v-if="selectedMedia.length > 6" class="more-media">
                +{{ selectedMedia.length - 6 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="form-actions">
      <button class="btn btn-secondary" @click="$emit('cancel')">
        取消
      </button>
      <button
        :disabled="!canAssociate"
        class="btn btn-primary"
        @click="performAssociation"
      >
        <svg v-if="processing" class="spinner" fill="none" viewBox="0 0 24 24">
          <circle cx="12" cy="12" fill="none" r="10" stroke="currentColor" stroke-dasharray="31.416" stroke-dashoffset="31.416" stroke-width="4"/>
        </svg>
        {{ processing ? '关联中...' : '确认关联' }}
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Message } from '@opentiny/vue'
import {
  batchAssociateMedia,
  attachMediaToActivity,
  attachMediaToDiary,
  createTimelineNode
} from '@/api/integration'

interface Props {
  selectedMedia: any[]
}

const props = defineProps<Props>()
const emit = defineEmits(['associated', 'cancel'])

// 响应式数据
const processing = ref(false)
const selectedTargetTypes = ref<string[]>([])
const selectedActivities = ref<number[]>([])
const selectedDiaries = ref<number[]>([])
const activitySearchQuery = ref('')
const diarySearchQuery = ref('')
const newTag = ref('')

// 活动和日记数据
const activities = ref<any[]>([])
const diaries = ref<any[]>([])

// 时间线表单
const timelineForm = reactive({
  title: '',
  description: '',
  eventDate: new Date().toISOString().split('T')[0],
  eventTime: new Date().toTimeString().slice(0, 5),
  tags: [] as string[]
})

// 关联设置
const associationSettings = reactive({
  addDescription: false,
  description: '',
  autoSort: true,
  createTimeline: false
})

// 目标类型配置
const targetTypes = [
  {
    key: 'activity',
    name: '活动',
    description: '将媒体文件关联到活动记录',
    icon: 'IconCalendar'
  },
  {
    key: 'diary',
    name: '日记',
    description: '将媒体文件添加到日记条目',
    icon: 'IconBook'
  },
  {
    key: 'timeline',
    name: '时间线节点',
    description: '创建新的时间线节点并关联媒体',
    icon: 'IconClock'
  }
]

// 计算属性
const filteredActivities = computed(() => {
  if (!activitySearchQuery.value) return activities.value

  return activities.value.filter(activity =>
    activity.title.toLowerCase().includes(activitySearchQuery.value.toLowerCase()) ||
    activity.description?.toLowerCase().includes(activitySearchQuery.value.toLowerCase()) ||
    activity.location?.toLowerCase().includes(activitySearchQuery.value.toLowerCase())
  )
})

const filteredDiaries = computed(() => {
  if (!diarySearchQuery.value) return diaries.value

  return diaries.value.filter(diary =>
    diary.title.toLowerCase().includes(diarySearchQuery.value.toLowerCase()) ||
    diary.content.toLowerCase().includes(diarySearchQuery.value.toLowerCase())
  )
})

const canAssociate = computed(() => {
  if (selectedTargetTypes.value.length === 0) return false

  if (selectedTargetTypes.value.includes('activity') && selectedActivities.value.length === 0) {
    return false
  }

  if (selectedTargetTypes.value.includes('diary') && selectedDiaries.value.length === 0) {
    return false
  }

  if (selectedTargetTypes.value.includes('timeline') && !timelineForm.title.trim()) {
    return false
  }

  return true
})

// 方法
const loadActivities = () => {
  // 模拟加载活动数据
  activities.value = [
    {
      id: 1,
      title: '春节家庭聚会',
      description: '全家人团聚过春节',
      activityDate: '2024-01-20',
      location: '家里',
      participantCount: 8
    },
    {
      id: 2,
      title: '周末户外郊游',
      description: '一家人去公园游玩',
      activityDate: '2024-01-15',
      location: '中山公园',
      participantCount: 4
    },
    {
      id: 3,
      title: '孩子生日派对',
      description: '庆祝小明10岁生日',
      activityDate: '2024-01-10',
      location: '家里',
      participantCount: 12
    }
  ]
}

const loadDiaries = () => {
  // 模拟加载日记数据
  diaries.value = [
    {
      id: 1,
      title: '新年新气象',
      content: '今天是新年的第一天，心情格外愉悦。全家人围坐在一起包饺子，聊着过去一年的点点滴滴...',
      createTime: '2024-01-01',
      mood: '愉悦',
      weather: '晴'
    },
    {
      id: 2,
      title: '温馨的午后',
      content: '今天下午和孩子们一起在花园里玩耍，看着他们天真烂漫的笑容，心中满满的幸福感...',
      createTime: '2024-01-18',
      mood: '幸福',
      weather: '多云'
    },
    {
      id: 3,
      title: '难忘的一天',
      content: '今天去了很久没去的地方，重新体验了童年的回忆，感慨时光荏苒，但美好永远值得珍藏...',
      createTime: '2024-01-12',
      mood: '怀念',
      weather: '阴'
    }
  ]
}

const searchActivities = () => {
  // 搜索逻辑已在计算属性中处理
}

const searchDiaries = () => {
  // 搜索逻辑已在计算属性中处理
}

const toggleActivity = (activityId: number) => {
  const index = selectedActivities.value.indexOf(activityId)
  if (index > -1) {
    selectedActivities.value.splice(index, 1)
  } else {
    selectedActivities.value.push(activityId)
  }
}

const toggleDiary = (diaryId: number) => {
  const index = selectedDiaries.value.indexOf(diaryId)
  if (index > -1) {
    selectedDiaries.value.splice(index, 1)
  } else {
    selectedDiaries.value.push(diaryId)
  }
}

const addTag = () => {
  const tag = newTag.value.trim().replace(/,$/, '')
  if (tag && !timelineForm.tags.includes(tag)) {
    timelineForm.tags.push(tag)
    newTag.value = ''
  }
}

const removeTag = (index: number) => {
  timelineForm.tags.splice(index, 1)
}

const performAssociation = async () => {
  if (!canAssociate.value) return

  processing.value = true

  try {
    const mediaIds = props.selectedMedia.map(m => m.id)
    const results = []

    // 关联到活动
    if (selectedTargetTypes.value.includes('activity') && selectedActivities.value.length > 0) {
      for (const activityId of selectedActivities.value) {
        const response = await attachMediaToActivity({
          activityId,
          mediaIds,
          description: associationSettings.addDescription ? associationSettings.description : undefined
        })
        if (response.code === 200) {
          results.push({ type: 'activity', targetId: activityId, result: response.data })
        }
      }
    }

    // 关联到日记
    if (selectedTargetTypes.value.includes('diary') && selectedDiaries.value.length > 0) {
      for (const diaryId of selectedDiaries.value) {
        const response = await attachMediaToDiary({
          diaryId,
          mediaIds,
          caption: associationSettings.addDescription ? associationSettings.description : undefined
        })
        if (response.code === 200) {
          results.push({ type: 'diary', targetId: diaryId, result: response.data })
        }
      }
    }

    // 创建时间线节点
    if (selectedTargetTypes.value.includes('timeline') && timelineForm.title.trim()) {
      const eventDateTime = `${timelineForm.eventDate}T${timelineForm.eventTime}:00`
      const response = await createTimelineNode({
        title: timelineForm.title,
        description: timelineForm.description,
        eventDate: eventDateTime,
        mediaIds,
        tags: timelineForm.tags
      })
      if (response.code === 200) {
        results.push({ type: 'timeline', targetId: response.data.id, result: response.data })
      }
    }

    emit('associated', results)
    Message.success(`成功创建 ${results.length} 个关联`)
  } catch (error) {
    console.error('批量关联失败:', error)
    Message.error('批量关联失败')
  } finally {
    processing.value = false
  }
}

const formatDate = (date: string | Date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}

const truncateText = (text: string, maxLength: number) => {
  if (text.length <= maxLength) return text
  return text.slice(0, maxLength) + '...'
}

// 初始化
onMounted(() => {
  loadActivities()
  loadDiaries()
})
</script>

<style lang="scss" scoped>
.batch-association-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .form-section {
    h5 {
      font-size: 1rem;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 1rem 0;
    }
  }

  .target-types {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    .target-type-option {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        border-color: #cbd5e1;
        background: #f8fafc;
      }

      &.selected {
        border-color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
      }

      input[type="checkbox"] {
        display: none;
      }

      .type-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        &.activity {
          background: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
        }

        &.diary {
          background: rgba(16, 185, 129, 0.1);
          color: #10b981;
        }

        &.timeline {
          background: rgba(245, 158, 11, 0.1);
          color: #f59e0b;
        }
      }

      .type-content {
        flex: 1;

        .type-name {
          font-weight: 500;
          color: #1e293b;
          margin-bottom: 0.25rem;
        }

        .type-description {
          font-size: 0.85rem;
          color: #64748b;
        }
      }
    }
  }

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

    h5 {
      margin: 0;
    }

    .btn-text {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #64748b;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.85rem;
      padding: 0.5rem;
      border-radius: 6px;

      &:hover {
        background: #f8fafc;
        color: #374151;
      }

      svg {
        width: 14px;
        height: 14px;
      }
    }
  }

  .search-box {
    position: relative;
    margin-bottom: 1rem;

    input {
      width: 100%;
      padding: 0.75rem 2.5rem 0.75rem 1rem;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 0.9rem;

      &:focus {
        outline: none;
        border-color: #3b82f6;
      }

      &::placeholder {
        color: #9ca3af;
      }
    }

    svg {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      color: #9ca3af;
    }
  }

  .items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;

    .item-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
      }

      &.selected {
        border-color: #3b82f6;
        background: rgba(59, 130, 246, 0.05);
      }

      &.activity {
        border-left-color: #3b82f6;
        border-left-width: 4px;
      }

      &.diary {
        border-left-color: #10b981;
        border-left-width: 4px;
      }

      .item-checkbox {
        input[type="checkbox"] {
          accent-color: #3b82f6;
        }
      }

      .item-icon {
        width: 36px;
        height: 36px;
        background: #f8fafc;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        flex-shrink: 0;

        svg {
          width: 18px;
          height: 18px;
        }
      }

      .item-content {
        flex: 1;
        min-width: 0;

        .item-title {
          font-weight: 500;
          color: #1e293b;
          margin-bottom: 0.25rem;
        }

        .item-meta {
          display: flex;
          align-items: center;
          gap: 1rem;
          font-size: 0.8rem;
          color: #64748b;
          margin-bottom: 0.5rem;

          .item-location,
          .item-mood {
            display: flex;
            align-items: center;
            gap: 0.25rem;

            svg {
              width: 12px;
              height: 12px;
            }
          }
        }

        .item-description {
          font-size: 0.85rem;
          color: #64748b;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .empty-message {
      text-align: center;
      padding: 2rem;
      color: #64748b;

      svg {
        width: 32px;
        height: 32px;
        margin-bottom: 0.75rem;
        opacity: 0.5;
      }

      p {
        margin: 0;
        font-size: 0.9rem;
      }
    }
  }

  .timeline-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .form-group {
      label {
        display: block;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
      }

      .form-input,
      .form-textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;

        &:focus {
          outline: none;
          border-color: #3b82f6;
        }

        &::placeholder {
          color: #9ca3af;
        }
      }

      .form-textarea {
        resize: vertical;
        min-height: 80px;
      }
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .tags-input {
      .tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        padding: 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        min-height: 48px;

        &:focus-within {
          border-color: #3b82f6;
        }

        .tag-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.25rem 0.5rem;
          background: rgba(59, 130, 246, 0.1);
          color: #3b82f6;
          border-radius: 6px;
          font-size: 0.8rem;

          button {
            background: none;
            border: none;
            color: #3b82f6;
            cursor: pointer;
            font-size: 0.9rem;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;

            &:hover {
              background: rgba(59, 130, 246, 0.2);
            }
          }
        }

        .tag-input {
          border: none;
          outline: none;
          flex: 1;
          min-width: 120px;
          font-size: 0.9rem;

          &::placeholder {
            color: #9ca3af;
          }
        }
      }
    }
  }

  .association-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .option-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;

      input[type="checkbox"] {
        accent-color: #3b82f6;
      }

      .option-content {
        flex: 1;

        .option-title {
          font-weight: 500;
          color: #1e293b;
          margin-bottom: 0.25rem;
        }

        .option-desc {
          font-size: 0.85rem;
          color: #64748b;
        }
      }
    }

    .description-input {
      margin-top: 0.5rem;

      .form-textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 0.9rem;
        resize: vertical;

        &:focus {
          outline: none;
          border-color: #3b82f6;
        }
      }
    }
  }

  .association-preview {
    .preview-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      padding: 2rem;
      background: #f8fafc;
      border-radius: 12px;
      margin-bottom: 1.5rem;

      .summary-item {
        text-align: center;

        .summary-number {
          font-size: 2rem;
          font-weight: 700;
          color: #3b82f6;
          margin-bottom: 0.25rem;
        }

        .summary-label {
          font-size: 0.9rem;
          color: #64748b;
        }
      }

      .summary-arrow {
        font-size: 1.5rem;
        color: #64748b;
        font-weight: 600;
      }

      .summary-targets {
        display: flex;
        gap: 1.5rem;

        .target-item {
          text-align: center;

          .target-number {
            font-size: 1.5rem;
            font-weight: 600;
            color: #10b981;
            margin-bottom: 0.25rem;
          }

          .target-label {
            font-size: 0.8rem;
            color: #64748b;
          }
        }
      }
    }

    .preview-details {
      .media-preview {
        h6 {
          font-size: 0.9rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0 0 1rem 0;
        }

        .media-list {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 1rem;

          .media-item {
            text-align: center;

            img {
              width: 80px;
              height: 80px;
              object-fit: cover;
              border-radius: 8px;
              border: 1px solid #e2e8f0;
              margin-bottom: 0.5rem;
            }

            .file-icon {
              width: 80px;
              height: 80px;
              background: #f3f4f6;
              border: 1px solid #e2e8f0;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0 auto 0.5rem;

              svg {
                width: 24px;
                height: 24px;
                color: #6b7280;
              }
            }

            .media-name {
              font-size: 0.75rem;
              color: #64748b;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: block;
              max-width: 100%;
            }
          }

          .more-media {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            margin: 0 auto;
          }
        }
      }
    }
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;

    .btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .spinner {
        width: 16px;
        height: 16px;
        animation: spin 1s linear infinite;
      }

      &.btn-secondary {
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid #cbd5e1;

        &:hover:not(:disabled) {
          background: #e2e8f0;
        }
      }

      &.btn-primary {
        background: #3b82f6;
        color: white;
        border: 1px solid #3b82f6;

        &:hover:not(:disabled) {
          background: #2563eb;
        }
      }
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .batch-association-form {
    .timeline-form .form-row {
      grid-template-columns: 1fr;
    }

    .association-preview .preview-summary {
      flex-direction: column;
      gap: 1rem;

      .summary-arrow {
        transform: rotate(90deg);
      }

      .summary-targets {
        flex-direction: column;
        gap: 1rem;
      }
    }

    .form-actions {
      flex-direction: column;

      .btn {
        width: 100%;
        justify-content: center;
      }
    }
  }
}
</style>
